<script setup lang="ts">
defineOptions({
  name: "fabBoardMachine"
});

import { ref, nextTick, inject } from "vue";
import fabBoardModelBox from "../fabBoardModelBox.vue";
import fabBoardEchartsModelBoxItem from "../fabBoardEchartsModelBoxItem.vue";
import { spcquerySpcAnalysis } from "@/api/spc";
import dayjs from "dayjs";

const configOptions = inject("configOptions", ref<Array<any>>([]));

const emitBoardAreaEventCb = inject("emitBoardAreaEvent") as Function;

const title = ref<string>("机械科关注指标");
const area = ref<string>("");
const loading = ref<boolean>(false);
const machineData = ref<Array<Record<string, any>>>([]);
const target = ref<Array<string>>([]);

const machineTemperatureRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machineHumidityRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machineParticleRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machinePCWFlowRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machinePCWPressureRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);
const machinePVPressureRef = ref<InstanceType<typeof fabBoardEchartsModelBoxItem> | null>(null);

const machineTemperatureData = ref<Record<string, any> | null>(null);
const machineHumidityData = ref<Record<string, any> | null>(null);
const machineParticleData = ref<Record<string, any> | null>(null);
const machinePCWFlowData = ref<Record<string, any> | null>(null);
const machinePCWPressureData = ref<Record<string, any> | null>(null);
const machinePVPressureData = ref<Record<string, any> | null>(null);

const machineTemperatureTitle = ref<string>("温度（℃）");
const machineHumidityTitle = ref<string>("湿度（%）");
const machineParticleTitle = ref<string>("Particle（μg/m³）");
const machinePCWFlowTitle = ref<string>("PCW流量（m³/s）");
const machinePCWPressureTitle = ref<string>("PCW压力（Pa）");
const machinePVPressureTitle = ref<string>("PV压力（Pa）");

const mapConfigOptionsFn = (val: string) => {
  const c = configOptions.value.filter(item => item.className === "MACHINE" && item.chartType === "spc" && item.areaId === val);
  target.value = c?.map(item => item?.quotaCode);
  return !c?.length;
};

const areaChangeHandler = async (val: string, flag: boolean = false) => {
  emitBoardAreaEventCb("machine", val);

  machineTemperatureData.value = null;
  machineHumidityData.value = null;
  machineParticleData.value = null;
  machinePCWFlowData.value = null;
  machinePCWPressureData.value = null;
  machinePVPressureData.value = null;
  const flag2 = mapConfigOptionsFn(val);
  await init(flag, flag2);
};

const startLoading = () => {
  loading.value = true;
};

const closeLoading = () => {
  loading.value = false;
};

const getParams = () => {
  const startTime = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");
  const endTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
  const timePeriod = "minutes";
  // 调试
  // const timePeriod = "hour";
  const jobIdList = null;
  const pointList = [...target.value];
  return { startTime, endTime, timePeriod, jobIdList, pointList };
};

const queryData = async () => {
  const params = getParams();
  machineTemperatureRef.value.loading = true;
  machineHumidityRef.value.loading = true;
  machineParticleRef.value.loading = true;
  machinePCWFlowRef.value.loading = true;
  machinePCWPressureRef.value.loading = true;
  machinePVPressureRef.value.loading = true;
  const res = await spcquerySpcAnalysis(params, () => {
    closeLoading();
    machineTemperatureRef.value.loading = false;
    machineHumidityRef.value.loading = false;
    machineParticleRef.value.loading = false;
    machinePCWFlowRef.value.loading = false;
    machinePCWPressureRef.value.loading = false;
    machinePVPressureRef.value.loading = false;
  });
  machineData.value = res;
  for (const d of res) {
    switch (d.point) {
      case target.value[0]:
        machineTemperatureData.value = d;
        break;
      case target.value[1]:
        machineHumidityData.value = d;
        break;
      case target.value[2]:
        machineParticleData.value = d;
        break;
      case target.value[3]:
        machinePCWFlowData.value = d;
        break;
      case target.value[4]:
        machinePCWPressureData.value = d;
        break;
      case target.value[5]:
        machinePVPressureData.value = d;
        break;
    }
  }
};

const init = async (flag: boolean = false, flag2: boolean = false) => {
  startLoading();
  !flag2 && (await queryData());
  closeLoading();
  await nextTick();
  machineTemperatureRef.value.init(flag);
  machineHumidityRef.value.init(flag);
  machineParticleRef.value.init(flag);
  machinePCWFlowRef.value.init(flag);
  machinePCWPressureRef.value.init(flag);
  machinePVPressureRef.value.init(flag);
};
</script>

<template>
  <fabBoardModelBox v-model="area" v-model:loading="loading" :title="title" @change="areaChangeHandler">
    <div class="machine-content">
      <fabBoardEchartsModelBoxItem ref="machineTemperatureRef" exportImage :title="machineTemperatureTitle" :data="machineTemperatureData" />
      <fabBoardEchartsModelBoxItem ref="machineHumidityRef" exportImage :title="machineHumidityTitle" :data="machineHumidityData" />
      <fabBoardEchartsModelBoxItem ref="machineParticleRef" exportImage :title="machineParticleTitle" :data="machineParticleData" />
      <fabBoardEchartsModelBoxItem ref="machinePCWFlowRef" exportImage :title="machinePCWFlowTitle" :data="machinePCWFlowData" />
      <fabBoardEchartsModelBoxItem ref="machinePCWPressureRef" exportImage :title="machinePCWPressureTitle" :data="machinePCWPressureData" />
      <fabBoardEchartsModelBoxItem ref="machinePVPressureRef" exportImage :title="machinePVPressureTitle" :data="machinePVPressureData" />
    </div>
  </fabBoardModelBox>
</template>

<style lang="scss" scoped>
.machine-content {
  display: grid;
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  height: 100%;
}
</style>
